<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="sequenceNo" label="编号" width="180"></el-table-column>
      <el-table-column prop="settleCode" label="结算编码" width="180"></el-table-column>
      <el-table-column prop="settleName" label="结算名称"></el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button size="mini" @click="updateDialog(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="confirmDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="openDialog">添加挂号信息</el-button>

    <el-dialog title="添加挂号信息" :visible.sync="dialogFormVisible" @close="closeDialog">
      <el-form :model="form">
          <el-form-item label="编号" :label-width="formLabelWidth">
          <el-input v-model="form.sequenceNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="结算编码" :label-width="formLabelWidth">
          <el-input v-model="form.settleCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="结算名称" :label-width="formLabelWidth">
          <el-input v-model="form.settleName" autocomplete="off"></el-input>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="handleAdd">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改挂号信息" :visible.sync="editDialogFormVisible" @close="closeEditDialog">
      <el-form :model="form">
          <el-form-item label="编号" :label-width="formLabelWidth">
          <el-input v-model="form.sequenceNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="结算编码" :label-width="formLabelWidth">
          <el-input v-model="form.settleCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="结算名称" :label-width="formLabelWidth">
          <el-input v-model="form.settleName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeEditDialog">取 消</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deleteByIdFunPro, addBodyFun, updateFun, getListMoreFunPro } from '@/CommonJs/RequestApi';

export default {
  name: 'settleer',
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      editDialogFormVisible: false,
      form: {
        sequenceNo: '3',
        settleCode: '3',
        settleName: '',
        DelMark: 1
      },
      formLabelWidth: '120px'
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      const data1 = {
        page: 1,
        limit: 5
      };
      getListMoreFunPro('settlecategory/get_sc', data1)
        .then(response => {
          console.log(response);
          this.tableData = response.data.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    updateDialog(index, row) {
      this.editDialogFormVisible = true;
      this.form = { ...row };
    },
    confirmDelete(index, row) {
      let confirmDelete = confirm("删除操作不可逆，一旦删除将无法恢复，您确定要删除吗？");
      if (confirmDelete) {
        deleteByIdFunPro('settlecategory/delete_sc', row.id)
          .then(response => {
            this.tableData.splice(index, 1);
            this.$message.success('删除成功');
            location.reload()
          })
          .catch(error => {
            console.error(error);
            this.$message.error('删除失败');
          });
      }
    },
    openDialog() {
      this.dialogFormVisible = true;
    },
    closeDialog() {
      this.dialogFormVisible = false;
      this.form = {
        settleCode: '',
        settleName: '',
        sequenceNo: '',
        settleFee: ''
      };
    },
    handleAdd() {
      addBodyFun('settlecategory/add_sc', this.form)
        .then(response => {
          this.tableData.push(response.data);
          this.$message.success('添加成功');
          this.dialogFormVisible = false;
          this.form = {
            settleCode: '',
            settleName: '',
            sequenceNo: '',
            settleFee: ''
          };
          location.reload()
        })
        .catch(error => {
          console.error(error);
          this.$message.error('添加失败');
        });
    },
    closeEditDialog() {
      this.editDialogFormVisible = false;
      this.form = {
        settleCode: '',
        settleName: '',
        sequenceNo: '',
        settleFee: ''
      };
    },
    handleEdit() {
      updateFun('settlecategory/update_sc', this.form)
        .then(response => {
          this.$message.success('修改成功');
          this.editDialogFormVisible = false;
          this.form = {
            settleCode: '',
            settleName: '',
            sequenceNo: '',
            settleFee: ''
          };
          location.reload()
        })
        .catch(error => {
          console.error(error);
          this.$message.error('修改失败');
        });
    }
  }
};
</script>

<style scoped></style>
